<script setup>
import {inject, reactive, ref} from "vue";
import {getParam, getTime, getToken, secondToTime} from "../util/util.js";
import {Edit, Goods, House, Setting, User} from "@element-plus/icons-vue";
import {ElMessage, formatter} from "element-plus";
import {getArticleHistory, getVideoHistory, getVideoRecord} from "@/api/ContentApi.js";
import {getMyAttention, getMyFans, getRelation} from "@/api/AuthApi.js";
import {getMyCommodities, getOrderForGoods, getShop, getShoppingCart} from "@/api/ShopApi.js";
import {logOut} from "@/util/ApiUtil.js";
import BeanUtil from "@/util/BeanUtil.js";
import {signIn} from "@/api/WalletApi.js";
import RechargeDialog from "@/components/dialog/RechargeDialog.vue";

const DEFAULT_WORD = inject("DEFAULT_WORD");
const myUser = inject("myUser");
const myWallet = inject("myWallet");
const currentChat = inject("currentChat");
// 是否显示
const isShow = inject("isShow");
// 功能栏是否展开
const isUnfold = ref(false);
// 功能栏索引
const menuIndex = ref('1');
// 我的 - 标签页索引
const activeName = ref('first');
// 关系 - 标签页索引
const relationIndex = ref('1');
// 购物 - 标签页索引
const shopIndex = ref('1');
// 内容历史记录
const contents = ref([]);
// 视频历史记录
const videos = ref([]);
// 文章历史记录
const articles = ref([]);
// 我的订单
const orderForGoodsList = ref([]);
// 好友ID
const friendIds = ref([]);
// 好友信息
const friends = ref([]);
// 关注用户ID
const userIds = ref([]);
// 关注用户信息
const users = ref([]);
// 粉丝ID
const fansIds = ref([]);
// 粉丝信息
const fanss = ref([]);
// 我的视频
const myVideos = ref([]);
// 我的购物车
const myShoppingCart = ref([]);
// 是否有商铺
const hasShop = ref(false);
// 我的商铺
const myShop = reactive({
  coverUrl: '',
  name: '',
  mark: 0,
  markNum: 0,
  // 总评分
  overallMark: 0,
});
// 我的商品数组
const myCommodities = ref([
  {
    id: 0, // 商品ID
    coverUrl: '', // 商铺封面
    name: '', // 名称
    salesType: '', // 销售类型
    price: '', // 价格
    limited: 0, // 限量
    num: 0, // 商品数量
    commentNum: 0, // 评论数量
    mark: 0, // 商品评分
    sales: 0, // 销售额
    sellTime: 0, // 发售时间
    setTime: 0 // 创建时间
  }
]);


const dialogImageUrl = '';
const dialogVisible = false;
const disabled = false;

const shopCoverFile = undefined; // 商铺封面文件
// 创建商铺
const publish_shop = {
  coverUrl: '', // 商铺封面
  name: '',    // 名称
  intro: '', // 商铺简介
};
const commodityCoverFile = undefined; // 商品封面文件
const commodityIntroduceFiles = []; // 商品介绍图片数组
// 创建商品
const publish_commodity = {
  coverUrl: '',  // 商品封面
  name: '',      // 名称
  salesType: 'common', // 销售类型
  introduceUrls: [], // 介绍图片地址数组
  price: 0, // 价格
  limited: 0,  // 限量
  num: 0,       // 商品数量
  sellTime: undefined, // 发售时间
};


function handleOpen(key, keyPath) {
  console.log(key, keyPath);
  // this.menuIndex = key
}
function handleSelect(key, keyPath) {
  console.log(key, keyPath);
  menuIndex.value = key;
  switch (key) {
    // 购物
    case '2': {
      // 1.查询订单记录
      getOrderForGoods().then(resp=>{
        orderForGoodsList.value = resp.data;
      }).catch(resp=>{
        ElMessage({
          message: '查询订单记录失败！',
          type: 'warning'
        });
      });
      // 2.查询我的商铺
      getShop().then(resp=>{
        BeanUtil.copyObject(resp.data, myShop);
      }).catch(resp=>{
        ElMessage({
          message: '查询我的商铺失败！',
          type: 'warning'
        });
      });
      break;
    }
    // 创作
    case '4': {
      // 查询视频记录
      getVideoRecord(myUser.id).then(resp=>{
        myVideos.value = resp.data;
      }).catch(resp=>{
        ElMessage({
          message: '查询失败！',
          type: 'warning'
        });
      });
      break;
    }
  }
}
// property是你需要排序传入的key,bol为true时是升序，false为降序
function sortByTime(property, bol) {
  return function(a, b) {
    var value1 = a[property];
    var value2 = b[property];
    if (bol) {
      // 升序
      return Date.parse(value1) - Date.parse(value2);
    } else {
      // 降序
      return Date.parse(value2) - Date.parse(value1)
    }
  }
}
// 和指定好友聊天
function chatFriend(friend) {
  isShow.messageDrawer = true;
  console.log(friend)
  for (let index in friend) {
    currentChat[index] = friend[index];
  }
}
// 签到
function signin() {
  signIn().then(resp=>{
    if(resp.code===1) {
      ElMessage({
        message: '签到成功！金币+'+resp.data,
        type: 'success'
      });
      myWallet.coin += resp.data;
      myWallet.isSignin = true;
    } else {
      ElMessage({
        message: resp.msg,
        type: 'warning'
      });
    }
    myVideos.value = resp.data;
  }).catch(resp=>{
    ElMessage({
      message: '签到失败！',
      type: 'warning'
    });
  });
}


// 未登录，不能访问该页面，返回上一级
if(getToken()==='') {
  window.history.back();
}
var a = getParam('a');
var b = getParam('b');
if(a!==undefined&&a!==null&&a!=='') {
  menuIndex.value = a+'';
}
if(b!==undefined&&b!==null&&b!=='') {
  shopIndex.value = b+'';
}
// 查询视频历史记录
getVideoHistory().then(resp=>{
  document.title = myUser.username+"的个人中心"
  videos.value = resp.data;
  for (let index in videos.value) {
    videos.value[index].type = "video";
  }
  contents.value = contents.value.concat(videos.value);
  // 查询文章历史记录
  getArticleHistory().then(resp=>{
    articles.value = resp.data;
    for (let index in articles.value) {
      articles.value[index].type = "article";
    }
    contents.value = contents.value.concat(articles.value);
    // 排序
    contents.value.sort(sortByTime("setTime", false));
    console.log(contents.value);
  }).catch(resp=>{
    ElMessage({
      message: '查询失败！',
      type: 'warning'
    });
  });
}).catch(resp=>{
  ElMessage({
    message: '查询失败！',
    type: 'warning'
  });
});
// 查询我的好友
getRelation().then(resp=>{
  // 查询每个用户
  friends.value = resp.data;
}).catch(resp=>{
  ElMessage({
    message: '查询失败！',
    type: 'warning'
  });
});
// 查询我的关注
getMyAttention().then(resp=>{
  users.value = resp.data
}).catch(resp=>{
  ElMessage({
    message: '查询失败！',
    type: 'warning'
  });
});
// 查询我的粉丝
getMyFans().then(resp=>{
  fanss.value = resp.data
}).catch(resp=>{
  ElMessage({
    message: '查询失败！',
    type: 'warning'
  });
});
// 2.购物
// 2.1.查询购物车
getShoppingCart().then(resp=>{
  myShoppingCart.value = resp.data;
}).catch(resp=>{
  ElMessage({
    message: '查询我的购物车失败！',
    type: 'warning'
  });
});
// 2.2.查询订单记录
getOrderForGoods().then(resp=>{
  orderForGoodsList.value = resp.data;
}).catch(resp=>{
  ElMessage({
    message: '查询订单记录失败！',
    type: 'warning'
  });
});
// 2.3.查询我的商铺
getShop().then(resp=>{
  for(let index in resp.data) {
    myShop[index] = resp.data[index];
  }
  myShop.overallMark = myShop.mark /myShop.markNum;
  hasShop.value = true;
}).catch(resp=>{
  ElMessage({
    message: '查询我的商铺失败！',
    type: 'warning'
  });
});
// 2.4.查询我的商品
getMyCommodities().then(resp=>{
  myCommodities.value = resp.data;
}).catch(resp=>{
  ElMessage({
    message: '查询我的商品失败！',
    type: 'warning'
  });
});
</script>
<template>
  <div class="main">
    <!-- 我的 -->
    <div v-if="menuIndex==='1'">
      <div class="my" style="box-shadow: 0 -100px 70px -60px rgba(255,255,255,1) inset;">
        <table style="height: 60px; padding-top: 400px; padding-left: 40px; width: 1350px;"><tbody>
          <tr>
            <td rowspan="2" width="80">
              <el-avatar :size="60" :src="myUser.avatarUrl" style="margin-top: 5px; margin-right: 5px; float: left" @click="isShow.uploadAvatarDialog=true"></el-avatar>
            </td>
            <td>
              <div v-if="myUser.member===0" style="float: left">{{myUser.username}}</div>
              <div v-else-if="myUser.member===1" style="float: left; color: rgba(255,210,0,1);">{{myUser.username}}</div>
            </td>
            <td rowspan="2">
              <button v-if="!myWallet.isSignin" class="signin_btn" @click="signin">签到</button>
              <button v-else class="signin_btn" disabled>已签到</button>
            </td>
          </tr>
          <tr>
            <td style="font-size: 13px; font-weight: 500; ">
              <span>钻石:&ensp;{{myWallet.diamond}}</span>
              <el-button link plain @click="isShow.topUpDialog=true" style="border: 0; margin: 0 5px;">充值</el-button>
              <span>金币:&ensp;{{myWallet.coin}}</span>
              <el-button link plain @click="isShow.goldExchangeDialog=true" style="border: 0; margin: 0 5px;">兑换</el-button>
            </td>
          </tr>
        </tbody></table>
      </div>
      <el-tabs v-model="activeName" class="demo-tabs" style="width: 1400px;">
        <el-tab-pane label="&emsp;主页&emsp;" name="first">
          <div class="zy_module" style="margin-top: 0;">
            <div style="float: left; width: 600px; margin: 10px 0 10px 10px;">
              <div v-if="myUser.member===0" style="font-size: 25px; font-weight: 600; color: rgba(80,80,80,1);">普通会员</div>
              <div v-else-if="myUser.member===1" style="font-size: 25px; font-weight: 600; color: rgba(240,160,0,1); text-shadow: 0 0 2px rgba(240,170,10,1); letter-spacing: 6px;">S会员</div>
              <div v-if="myUser.member===1" style="font-size: 12px; color: rgba(120,120,120,1);">到期时间：{{getTime(myUser.memberExpirationTime,1)}}</div>
              <el-button style="float: right; margin-top: 100px;" @click="selectMemberPrice" round>购买或续期</el-button>
            </div>
            <div style="float: left; width: 0; height: 200px; border: 1px rgba(150,150,150,0.5) solid; margin: 10px 30px;"></div>
            <div class="creation" style="float: left;">
              <h3 style="font-weight: 400;">创作</h3>
              <button @click="open('/publish_video/index.html')">发布视频&ensp;⟩</button>
              <button @click="open('/publish_article/index.html')">发布文章&ensp;⟩</button>
              <button @click="handleSelect('4', ['4'])">更多&ensp;⟩</button>
            </div>
          </div>
          <hr style="width: 1350px; background-color: rgba(220, 220, 220, 1); border: none; height: 1px;">
          <div class="zy_module">
            <h3 style="font-weight: 400;">我看过的</h3>
            <span v-for="content in contents.slice(0,5)">
                                    <!--视频-->
                                    <span v-if="content.type==='video'" class="min_videoBox" @click="href('/video/index.html?id='+content.id)">
                                        <img class="min_videoBox_img" :src="content.coverUrl">
                                        <div class="min_videoBox_title">
                                            <span v-if="content.title.length > 15">
                                                {{content.title.slice(0,15)}}...
                                            </span>
                                            <span v-else>
                                                {{content.title}}
                                            </span>
                                            <div style="float: right; margin-right: 2px; min-width: 44px; height: 20px">
                                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" width="22" height="22" fill="#ffffff" class="bili-video-card__stats--icon" style="float: left; margin: 0 3px; color: rgba(0, 0, 0, 1);">
                                                    <path d="M12 4.99805C9.48178 4.99805 7.283 5.12616 5.73089 5.25202C4.65221 5.33949 3.81611 6.16352 3.72 7.23254C3.60607 8.4998 3.5 10.171 3.5 11.998C3.5 13.8251 3.60607 15.4963 3.72 16.76355C3.81611 17.83255 4.65221 18.6566 5.73089 18.7441C7.283 18.8699 9.48178 18.998 12 18.998C14.5185 18.998 16.7174 18.8699 18.2696 18.74405C19.3481 18.65655 20.184 17.8328 20.2801 16.76405C20.394 15.4973 20.5 13.82645 20.5 11.998C20.5 10.16965 20.394 8.49877 20.2801 7.23205C20.184 6.1633 19.3481 5.33952 18.2696 5.25205C16.7174 5.12618 14.5185 4.99805 12 4.99805zM5.60965 3.75693C7.19232 3.62859 9.43258 3.49805 12 3.49805C14.5677 3.49805 16.8081 3.62861 18.3908 3.75696C20.1881 3.90272 21.6118 5.29278 21.7741 7.09773C21.8909 8.3969 22 10.11405 22 11.998C22 13.88205 21.8909 15.5992 21.7741 16.8984C21.6118 18.7033 20.1881 20.09335 18.3908 20.23915C16.8081 20.3675 14.5677 20.498 12 20.498C9.43258 20.498 7.19232 20.3675 5.60965 20.2392C3.81206 20.0934 2.38831 18.70295 2.22603 16.8979C2.10918 15.5982 2 13.8808 2 11.998C2 10.1153 2.10918 8.39787 2.22603 7.09823C2.38831 5.29312 3.81206 3.90269 5.60965 3.75693z" fill="currentColor"></path>
                                                    <path d="M14.7138 10.96875C15.50765 11.4271 15.50765 12.573 14.71375 13.0313L11.5362 14.8659C10.74235 15.3242 9.75 14.7513 9.75001 13.8346L9.75001 10.1655C9.75001 9.24881 10.74235 8.67587 11.5362 9.13422L14.7138 10.96875z" fill="currentColor"></path>
                                                </svg>
                                                <div style="float: left">{{content.tapNum}}</div>
                                            </div>
                                        </div>
                                    </span>
              <!--文章-->
                                    <span v-else class="min_videoBox" @click="href('/article/index.html?id='+content.id)">
                                        <img class="min_videoBox_img" :src="content.coverUrl">
                                        <div class="min_videoBox_title">
                                            <el-tag type="info" effect="plain" size="small" style="float: left; height: 17px; width: 30px; margin: 1px 4px 1px 0">文章</el-tag>
                                            <span v-if="content.title.length > 15">
                                                {{content.title.slice(0,15)}}...
                                            </span>
                                            <span v-else>
                                                {{content.title}}
                                            </span>
                                            <div style="float: right; margin-right: 2px; min-width: 44px; height: 20px">
                                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" width="22" height="22" fill="#ffffff" class="bili-video-card__stats--icon" style="float: left; margin: 0 3px; color: rgba(0, 0, 0, 1);">
                                                    <path d="M12 4.99805C9.48178 4.99805 7.283 5.12616 5.73089 5.25202C4.65221 5.33949 3.81611 6.16352 3.72 7.23254C3.60607 8.4998 3.5 10.171 3.5 11.998C3.5 13.8251 3.60607 15.4963 3.72 16.76355C3.81611 17.83255 4.65221 18.6566 5.73089 18.7441C7.283 18.8699 9.48178 18.998 12 18.998C14.5185 18.998 16.7174 18.8699 18.2696 18.74405C19.3481 18.65655 20.184 17.8328 20.2801 16.76405C20.394 15.4973 20.5 13.82645 20.5 11.998C20.5 10.16965 20.394 8.49877 20.2801 7.23205C20.184 6.1633 19.3481 5.33952 18.2696 5.25205C16.7174 5.12618 14.5185 4.99805 12 4.99805zM5.60965 3.75693C7.19232 3.62859 9.43258 3.49805 12 3.49805C14.5677 3.49805 16.8081 3.62861 18.3908 3.75696C20.1881 3.90272 21.6118 5.29278 21.7741 7.09773C21.8909 8.3969 22 10.11405 22 11.998C22 13.88205 21.8909 15.5992 21.7741 16.8984C21.6118 18.7033 20.1881 20.09335 18.3908 20.23915C16.8081 20.3675 14.5677 20.498 12 20.498C9.43258 20.498 7.19232 20.3675 5.60965 20.2392C3.81206 20.0934 2.38831 18.70295 2.22603 16.8979C2.10918 15.5982 2 13.8808 2 11.998C2 10.1153 2.10918 8.39787 2.22603 7.09823C2.38831 5.29312 3.81206 3.90269 5.60965 3.75693z" fill="currentColor"></path>
                                                    <path d="M14.7138 10.96875C15.50765 11.4271 15.50765 12.573 14.71375 13.0313L11.5362 14.8659C10.74235 15.3242 9.75 14.7513 9.75001 13.8346L9.75001 10.1655C9.75001 9.24881 10.74235 8.67587 11.5362 9.13422L14.7138 10.96875z" fill="currentColor"></path>
                                                </svg>
                                                <div style="float: left">{{content.tapNum}}</div>
                                            </div>
                                        </div>
                                    </span>
                                </span>
            <span @click="activeName='second'" style="user-select: none; line-height: 100px;">更多></span>
          </div>
          <hr style="width: 1350px; background-color: rgba(220, 220, 220, 1); border: none; height: 1px;">
          <div class="zy_module">
            <h3 style="font-weight: 400;">最近点赞的</h3>
            <span class="min_videoBox" v-for="video in videos.slice(0,5)" @click="href('/video/index.html?id='+video.id)">
                                    <img class="min_videoBox_img" :src="video.coverUrl">
                                    <div class="min_videoBox_title">
                                        <span v-if="video.title.length > 15">
                                            {{video.title.slice(0,15)}}...
                                        </span>
                                        <span v-else>
                                            {{video.title}}
                                        </span>
                                        <div style="float: right; margin-right: 2px; min-width: 44px; height: 20px">
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" width="22" height="22" fill="#ffffff" class="bili-video-card__stats--icon" style="float: left; margin: 0 3px; color: rgba(0, 0, 0, 1);">
                                                <path d="M12 4.99805C9.48178 4.99805 7.283 5.12616 5.73089 5.25202C4.65221 5.33949 3.81611 6.16352 3.72 7.23254C3.60607 8.4998 3.5 10.171 3.5 11.998C3.5 13.8251 3.60607 15.4963 3.72 16.76355C3.81611 17.83255 4.65221 18.6566 5.73089 18.7441C7.283 18.8699 9.48178 18.998 12 18.998C14.5185 18.998 16.7174 18.8699 18.2696 18.74405C19.3481 18.65655 20.184 17.8328 20.2801 16.76405C20.394 15.4973 20.5 13.82645 20.5 11.998C20.5 10.16965 20.394 8.49877 20.2801 7.23205C20.184 6.1633 19.3481 5.33952 18.2696 5.25205C16.7174 5.12618 14.5185 4.99805 12 4.99805zM5.60965 3.75693C7.19232 3.62859 9.43258 3.49805 12 3.49805C14.5677 3.49805 16.8081 3.62861 18.3908 3.75696C20.1881 3.90272 21.6118 5.29278 21.7741 7.09773C21.8909 8.3969 22 10.11405 22 11.998C22 13.88205 21.8909 15.5992 21.7741 16.8984C21.6118 18.7033 20.1881 20.09335 18.3908 20.23915C16.8081 20.3675 14.5677 20.498 12 20.498C9.43258 20.498 7.19232 20.3675 5.60965 20.2392C3.81206 20.0934 2.38831 18.70295 2.22603 16.8979C2.10918 15.5982 2 13.8808 2 11.998C2 10.1153 2.10918 8.39787 2.22603 7.09823C2.38831 5.29312 3.81206 3.90269 5.60965 3.75693z" fill="currentColor"></path>
                                                <path d="M14.7138 10.96875C15.50765 11.4271 15.50765 12.573 14.71375 13.0313L11.5362 14.8659C10.74235 15.3242 9.75 14.7513 9.75001 13.8346L9.75001 10.1655C9.75001 9.24881 10.74235 8.67587 11.5362 9.13422L14.7138 10.96875z" fill="currentColor"></path>
                                            </svg>
                                            <div style="float: left">{{video.tapNum}}</div>
                                        </div>
                                    </div>
                                </span>
            <span @click="activeName='third'" style="user-select: none; line-height: 100px;">更多></span>
          </div>
          <hr style="width: 1350px; background-color: rgba(220, 220, 220, 1); border: none; height: 1px;">
          <div class="zy_module">
            <h3 style="font-weight: 400;">我收藏的</h3>
            <span class="min_videoBox" v-for="video in videos.slice(0,5)" @click="href('/video/index.html?id='+video.id)">
                                    <img class="min_videoBox_img" :src="video.coverUrl">
                                    <div class="min_videoBox_title">
                                        <span v-if="video.title.length > 15">
                                            {{video.title.slice(0,15)}}...
                                        </span>
                                        <span v-else>
                                            {{video.title}}
                                        </span>
                                        <div style="float: right; margin-right: 2px; min-width: 44px; height: 20px">
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" width="22" height="22" fill="#ffffff" class="bili-video-card__stats--icon" style="float: left; margin: 0 3px; color: rgba(0, 0, 0, 1);">
                                                <path d="M12 4.99805C9.48178 4.99805 7.283 5.12616 5.73089 5.25202C4.65221 5.33949 3.81611 6.16352 3.72 7.23254C3.60607 8.4998 3.5 10.171 3.5 11.998C3.5 13.8251 3.60607 15.4963 3.72 16.76355C3.81611 17.83255 4.65221 18.6566 5.73089 18.7441C7.283 18.8699 9.48178 18.998 12 18.998C14.5185 18.998 16.7174 18.8699 18.2696 18.74405C19.3481 18.65655 20.184 17.8328 20.2801 16.76405C20.394 15.4973 20.5 13.82645 20.5 11.998C20.5 10.16965 20.394 8.49877 20.2801 7.23205C20.184 6.1633 19.3481 5.33952 18.2696 5.25205C16.7174 5.12618 14.5185 4.99805 12 4.99805zM5.60965 3.75693C7.19232 3.62859 9.43258 3.49805 12 3.49805C14.5677 3.49805 16.8081 3.62861 18.3908 3.75696C20.1881 3.90272 21.6118 5.29278 21.7741 7.09773C21.8909 8.3969 22 10.11405 22 11.998C22 13.88205 21.8909 15.5992 21.7741 16.8984C21.6118 18.7033 20.1881 20.09335 18.3908 20.23915C16.8081 20.3675 14.5677 20.498 12 20.498C9.43258 20.498 7.19232 20.3675 5.60965 20.2392C3.81206 20.0934 2.38831 18.70295 2.22603 16.8979C2.10918 15.5982 2 13.8808 2 11.998C2 10.1153 2.10918 8.39787 2.22603 7.09823C2.38831 5.29312 3.81206 3.90269 5.60965 3.75693z" fill="currentColor"></path>
                                                <path d="M14.7138 10.96875C15.50765 11.4271 15.50765 12.573 14.71375 13.0313L11.5362 14.8659C10.74235 15.3242 9.75 14.7513 9.75001 13.8346L9.75001 10.1655C9.75001 9.24881 10.74235 8.67587 11.5362 9.13422L14.7138 10.96875z" fill="currentColor"></path>
                                            </svg>
                                            <div style="float: left">{{video.tapNum}}</div>
                                        </div>
                                    </div>
                                </span>
            <span @click="activeName='fourth'" style="user-select: none; line-height: 100px;">更多></span>
          </div>
        </el-tab-pane>
        <el-tab-pane label="&emsp;看过&emsp;" name="second">
                            <span v-for="content in contents">
                                <!--视频-->
                                <span v-if="content.type==='video'" class="videoBox" @click="href('/video/index.html?id='+content.id)">
                                    <img class="videoBox_img" :src="content.coverUrl">
                                    <div class="videoBox_totalTime">
                                        <div style="float: left; margin-left: 2px; min-width: 44px; height: 20px">
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24" fill="#ffffff" class="bili-video-card__stats--icon" style="float: left; margin: 6px 3px">
                                                <path d="M12 4.99805C9.48178 4.99805 7.283 5.12616 5.73089 5.25202C4.65221 5.33949 3.81611 6.16352 3.72 7.23254C3.60607 8.4998 3.5 10.171 3.5 11.998C3.5 13.8251 3.60607 15.4963 3.72 16.76355C3.81611 17.83255 4.65221 18.6566 5.73089 18.7441C7.283 18.8699 9.48178 18.998 12 18.998C14.5185 18.998 16.7174 18.8699 18.2696 18.74405C19.3481 18.65655 20.184 17.8328 20.2801 16.76405C20.394 15.4973 20.5 13.82645 20.5 11.998C20.5 10.16965 20.394 8.49877 20.2801 7.23205C20.184 6.1633 19.3481 5.33952 18.2696 5.25205C16.7174 5.12618 14.5185 4.99805 12 4.99805zM5.60965 3.75693C7.19232 3.62859 9.43258 3.49805 12 3.49805C14.5677 3.49805 16.8081 3.62861 18.3908 3.75696C20.1881 3.90272 21.6118 5.29278 21.7741 7.09773C21.8909 8.3969 22 10.11405 22 11.998C22 13.88205 21.8909 15.5992 21.7741 16.8984C21.6118 18.7033 20.1881 20.09335 18.3908 20.23915C16.8081 20.3675 14.5677 20.498 12 20.498C9.43258 20.498 7.19232 20.3675 5.60965 20.2392C3.81206 20.0934 2.38831 18.70295 2.22603 16.8979C2.10918 15.5982 2 13.8808 2 11.998C2 10.1153 2.10918 8.39787 2.22603 7.09823C2.38831 5.29312 3.81206 3.90269 5.60965 3.75693z" fill="currentColor"></path>
                                                <path d="M14.7138 10.96875C15.50765 11.4271 15.50765 12.573 14.71375 13.0313L11.5362 14.8659C10.74235 15.3242 9.75 14.7513 9.75001 13.8346L9.75001 10.1655C9.75001 9.24881 10.74235 8.67587 11.5362 9.13422L14.7138 10.96875z" fill="currentColor"></path>
                                            </svg>
                                            <div style="float: left">{{content.tapNum}}</div>
                                        </div>
                                        {{secondToTime(content.videoTotalTime)}}
                                    </div>
                                    <div class="videoBox_title">{{content.title}}</div>
                                    <div class="videoBox_bottom">
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" class="bili-video-card__info--owner__up">
                                            <path d="M6.15 8.24805C6.5642 8.24805 6.9 8.58383 6.9 8.99805L6.9 12.7741C6.9 13.5881 7.55988 14.248 8.3739 14.248C9.18791 14.248 9.8478 13.5881 9.8478 12.7741L9.8478 8.99805C9.8478 8.58383 10.1836 8.24805 10.5978 8.24805C11.012 8.24805 11.3478 8.58383 11.3478 8.99805L11.3478 12.7741C11.3478 14.41655 10.01635 15.748 8.3739 15.748C6.73146 15.748 5.4 14.41655 5.4 12.7741L5.4 8.99805C5.4 8.58383 5.73578 8.24805 6.15 8.24805z" fill="currentColor"></path>
                                            <path d="M12.6522 8.99805C12.6522 8.58383 12.98795 8.24805 13.4022 8.24805L15.725 8.24805C17.31285 8.24805 18.6 9.53522 18.6 11.123C18.6 12.71085 17.31285 13.998 15.725 13.998L14.1522 13.998L14.1522 14.998C14.1522 15.4122 13.8164 15.748 13.4022 15.748C12.98795 15.748 12.6522 15.4122 12.6522 14.998L12.6522 8.99805zM14.1522 12.498L15.725 12.498C16.4844 12.498 17.1 11.8824 17.1 11.123C17.1 10.36365 16.4844 9.74804 15.725 9.74804L14.1522 9.74804L14.1522 12.498z" fill="currentColor"></path>
                                            <path d="M12 4.99805C9.48178 4.99805 7.283 5.12616 5.73089 5.25202C4.65221 5.33949 3.81611 6.16352 3.72 7.23254C3.60607 8.4998 3.5 10.171 3.5 11.998C3.5 13.8251 3.60607 15.4963 3.72 16.76355C3.81611 17.83255 4.65221 18.6566 5.73089 18.7441C7.283 18.8699 9.48178 18.998 12 18.998C14.5185 18.998 16.7174 18.8699 18.2696 18.74405C19.3481 18.65655 20.184 17.8328 20.2801 16.76405C20.394 15.4973 20.5 13.82645 20.5 11.998C20.5 10.16965 20.394 8.49877 20.2801 7.23205C20.184 6.1633 19.3481 5.33952 18.2696 5.25205C16.7174 5.12618 14.5185 4.99805 12 4.99805zM5.60965 3.75693C7.19232 3.62859 9.43258 3.49805 12 3.49805C14.5677 3.49805 16.8081 3.62861 18.3908 3.75696C20.1881 3.90272 21.6118 5.29278 21.7741 7.09773C21.8909 8.3969 22 10.11405 22 11.998C22 13.88205 21.8909 15.5992 21.7741 16.8984C21.6118 18.7033 20.1881 20.09335 18.3908 20.23915C16.8081 20.3675 14.5677 20.498 12 20.498C9.43258 20.498 7.19232 20.3675 5.60965 20.2392C3.81206 20.0934 2.38831 18.70295 2.22603 16.8979C2.10918 15.5982 2 13.8808 2 11.998C2 10.1153 2.10918 8.39787 2.22603 7.09823C2.38831 5.29312 3.81206 3.90269 5.60965 3.75693z" fill="currentColor"></path>
                                        </svg>
                                        {{content.username}}
                                        <div style="float: right; margin-right: 2px; min-width: 44px; height: 20px">
                                            {{getTime(content.setTime,1)}}
                                        </div>
                                    </div>
                                </span>
                              <!--文章-->
                                <span v-else class="videoBox" @click="href('/article/index.html?id='+content.id)">
                                    <img class="videoBox_img" :src="content.coverUrl">
                                    <div>
                                        <el-tag type="info" effect="plain" size="small" style="float: left; height: 17px; width: 30px; margin: 4px 4px 4px 4px">文章</el-tag>
                                        <span class="videoBox_title">{{content.title}}</span>
                                        <div style="float: right; margin-right: 3px;">{{content.tapNum}}</div>
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" width="22" height="22" fill="#ffffff" class="bili-video-card__stats--icon" style="float: right; margin: 2px 3px; color: #000;">
                                            <path d="M12 4.99805C9.48178 4.99805 7.283 5.12616 5.73089 5.25202C4.65221 5.33949 3.81611 6.16352 3.72 7.23254C3.60607 8.4998 3.5 10.171 3.5 11.998C3.5 13.8251 3.60607 15.4963 3.72 16.76355C3.81611 17.83255 4.65221 18.6566 5.73089 18.7441C7.283 18.8699 9.48178 18.998 12 18.998C14.5185 18.998 16.7174 18.8699 18.2696 18.74405C19.3481 18.65655 20.184 17.8328 20.2801 16.76405C20.394 15.4973 20.5 13.82645 20.5 11.998C20.5 10.16965 20.394 8.49877 20.2801 7.23205C20.184 6.1633 19.3481 5.33952 18.2696 5.25205C16.7174 5.12618 14.5185 4.99805 12 4.99805zM5.60965 3.75693C7.19232 3.62859 9.43258 3.49805 12 3.49805C14.5677 3.49805 16.8081 3.62861 18.3908 3.75696C20.1881 3.90272 21.6118 5.29278 21.7741 7.09773C21.8909 8.3969 22 10.11405 22 11.998C22 13.88205 21.8909 15.5992 21.7741 16.8984C21.6118 18.7033 20.1881 20.09335 18.3908 20.23915C16.8081 20.3675 14.5677 20.498 12 20.498C9.43258 20.498 7.19232 20.3675 5.60965 20.2392C3.81206 20.0934 2.38831 18.70295 2.22603 16.8979C2.10918 15.5982 2 13.8808 2 11.998C2 10.1153 2.10918 8.39787 2.22603 7.09823C2.38831 5.29312 3.81206 3.90269 5.60965 3.75693z" fill="currentColor"></path>
                                            <path d="M14.7138 10.96875C15.50765 11.4271 15.50765 12.573 14.71375 13.0313L11.5362 14.8659C10.74235 15.3242 9.75 14.7513 9.75001 13.8346L9.75001 10.1655C9.75001 9.24881 10.74235 8.67587 11.5362 9.13422L14.7138 10.96875z" fill="currentColor"></path>
                                        </svg>
                                    </div>
                                    <div class="videoBox_bottom">
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" class="bili-video-card__info--owner__up">
                                            <path d="M6.15 8.24805C6.5642 8.24805 6.9 8.58383 6.9 8.99805L6.9 12.7741C6.9 13.5881 7.55988 14.248 8.3739 14.248C9.18791 14.248 9.8478 13.5881 9.8478 12.7741L9.8478 8.99805C9.8478 8.58383 10.1836 8.24805 10.5978 8.24805C11.012 8.24805 11.3478 8.58383 11.3478 8.99805L11.3478 12.7741C11.3478 14.41655 10.01635 15.748 8.3739 15.748C6.73146 15.748 5.4 14.41655 5.4 12.7741L5.4 8.99805C5.4 8.58383 5.73578 8.24805 6.15 8.24805z" fill="currentColor"></path>
                                            <path d="M12.6522 8.99805C12.6522 8.58383 12.98795 8.24805 13.4022 8.24805L15.725 8.24805C17.31285 8.24805 18.6 9.53522 18.6 11.123C18.6 12.71085 17.31285 13.998 15.725 13.998L14.1522 13.998L14.1522 14.998C14.1522 15.4122 13.8164 15.748 13.4022 15.748C12.98795 15.748 12.6522 15.4122 12.6522 14.998L12.6522 8.99805zM14.1522 12.498L15.725 12.498C16.4844 12.498 17.1 11.8824 17.1 11.123C17.1 10.36365 16.4844 9.74804 15.725 9.74804L14.1522 9.74804L14.1522 12.498z" fill="currentColor"></path>
                                            <path d="M12 4.99805C9.48178 4.99805 7.283 5.12616 5.73089 5.25202C4.65221 5.33949 3.81611 6.16352 3.72 7.23254C3.60607 8.4998 3.5 10.171 3.5 11.998C3.5 13.8251 3.60607 15.4963 3.72 16.76355C3.81611 17.83255 4.65221 18.6566 5.73089 18.7441C7.283 18.8699 9.48178 18.998 12 18.998C14.5185 18.998 16.7174 18.8699 18.2696 18.74405C19.3481 18.65655 20.184 17.8328 20.2801 16.76405C20.394 15.4973 20.5 13.82645 20.5 11.998C20.5 10.16965 20.394 8.49877 20.2801 7.23205C20.184 6.1633 19.3481 5.33952 18.2696 5.25205C16.7174 5.12618 14.5185 4.99805 12 4.99805zM5.60965 3.75693C7.19232 3.62859 9.43258 3.49805 12 3.49805C14.5677 3.49805 16.8081 3.62861 18.3908 3.75696C20.1881 3.90272 21.6118 5.29278 21.7741 7.09773C21.8909 8.3969 22 10.11405 22 11.998C22 13.88205 21.8909 15.5992 21.7741 16.8984C21.6118 18.7033 20.1881 20.09335 18.3908 20.23915C16.8081 20.3675 14.5677 20.498 12 20.498C9.43258 20.498 7.19232 20.3675 5.60965 20.2392C3.81206 20.0934 2.38831 18.70295 2.22603 16.8979C2.10918 15.5982 2 13.8808 2 11.998C2 10.1153 2.10918 8.39787 2.22603 7.09823C2.38831 5.29312 3.81206 3.90269 5.60965 3.75693z" fill="currentColor"></path>
                                        </svg>
                                        {{content.username}}
                                        <div style="float: right; margin-right: 2px; min-width: 44px; height: 20px">
                                            {{getTime(content.setTime,1)}}
                                        </div>
                                    </div>
                                </span>
                            </span>
        </el-tab-pane>
        <el-tab-pane label="&emsp;点赞&emsp;" name="third">
          <div class="videoBox" v-for="article in articles" @click="href('/article/index.html?id='+article.id)">
            <img class="videoBox_img" :src="article.coverUrl">
            <el-tag type="info" effect="plain" size="small" style="float: left; height: 17px; width: 30px; margin: 4px 4px 4px 4px">文章</el-tag>
            <div class="videoBox_title">{{article.title}}</div>
            <div class="videoBox_bottom">{{getTime(article.setTime,1)}}</div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="&emsp;收藏&emsp;" name="fourth">Role</el-tab-pane>
      </el-tabs>
      <el-backtop :right="100" :bottom="100" visibility-height="1">
        <div style="height: 100%;width: 100%;text-align: center;line-height: 40px; font-size: 14px;color: #1989fa;">
          顶部
        </div>
      </el-backtop>
    </div>
    <!-- 购物 -->
    <el-tabs v-model="shopIndex" tab-position="left" class="demo-tabs" v-if="menuIndex==='2'" style="width: 100%; padding: 20px; min-height: 200px;">
      <el-tab-pane label="购物车" name="1">
        <div style="margin: 10px 20px 25px 20px;">
          <el-button plain>清空购物车</el-button>
          <el-button type="primary" plain>结算购物车</el-button>
        </div>
        <table class="shoppingCart" v-for="commodity in myShoppingCart">
          <tbody>
            <tr>
              <td rowspan="2" width="130"><img :src="commodity.coverUrl" style="width: 100px; height: 100px; margin: 10px; border: 1px solid rgba(0,0,0,0.2); border-radius: 10px;"></td>
              <td height="30" width="200" style="color: rgba(100,100,100,1);">商品名称</td>
              <td width="80" style="color: rgba(100,100,100,1);">商品数量</td>
              <td width="100" style="color: rgba(100,100,100,1);">商品价格</td>
              <td width="100" style="color: rgba(100,100,100,1);">商品总价</td>
              <td style="color: rgba(100,100,100,1);">操作</td>
            </tr>
            <tr>
              <td style="overflow: hidden;text-overflow: ellipsis;">{{commodity.commodityName.slice(0,38)}}...</td>
              <td>{{commodity.num}}</td>
              <td>{{commodity.price}}</td>
              <td>{{commodity.num*commodity.price}}</td>
              <td><el-button type="danger" plain round>删除</el-button></td>
            </tr>
          </tbody>
        </table>
      </el-tab-pane>
      <el-tab-pane label="我的订单" name="2">
        <el-table :data="orderForGoodsList" :border="true" :default-sort="{ prop: 'setTime', order: 'descending' }" style="width: 1250px; border: 1px solid rgba(220, 220, 220, 1);">
          <el-table-column prop="id" label="订单号" width="180"></el-table-column>
          <el-table-column prop="commodityName" label="名称" min-width="350"></el-table-column>
          <el-table-column prop="num" label="数量" width="70" sortable></el-table-column>
          <el-table-column prop="unitPrice" label="单价" width="80" sortable></el-table-column>
          <el-table-column prop="totalPrice" label="总价" width="110" sortable></el-table-column>
          <el-table-column prop="setTime" label="时间" width="270" sortable></el-table-column>
          <el-table-column label="操作" width="120" slot-scope="scope">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="open('/commodity?id='+scope.row.commodityId)">查看商品</el-button>
              <el-button link type="danger" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="我的商铺" name="3">
        <!-- 没有商铺 -->
        <div v-if="!hasShop">
          <h2>还没有商铺？创建一个！</h2>
          <hr style="width: 95%;">
          <table>
            <tbody>
            <tr>
              <td style="width: 100px;">商铺封面：</td>
              <td>
                <input type="file" @change="uploadShopCover($event)" accept="image/*"><br>
                <img alt="封面" :src="publish_shop.coverUrl" style="width: 400px; height: 220px; border: 1px solid rgba(0,0,0,0.5);">
              </td>
            </tr>
            <tr>
              <td>商铺名称：</td>
              <td><el-input v-model="publish_shop.name" style="width: 240px" placeholder="请输入..."></el-input></td>
            </tr>
            <tr>
              <td>商铺简介：</td>
              <td><el-input v-model="publish_shop.intro" style="width: 240px" placeholder="请输入..."></el-input></td>
            </tr>
            <tr>
              <td colspan="2"><el-button type="primary" style="float: right;" @click="">创建商铺</el-button></td>
            </tr>
            </tbody>
          </table>
        </div>
        <!-- 存在商铺 -->
        <div v-else>
          <h1>我的商铺：{{myShop.name}}</h1>
          <table style="line-height: 28px;">
            <tbody>
            <tr>
              <td><img :src="myShop.coverUrl" style="width: 300px; height: 150px; border: 1px solid rgba(0, 0, 0, 0.2); margin-right: 20px;"></td>
              <td>
                <div>简介：{{myShop.intro}}</div>
                <div>商品数量：{{myShop.commodityNum}}</div>
                <div>商铺评分：
                  <el-rate v-model="myShop.overallMark" disabled show-score
                           text-color="#ff9900" score-template="{value} points"
                  ></el-rate>
                </div>
                <div>销售额：{{myShop.sales}}</div>
                <div>粉丝：{{myShop.peopleNum}}</div>
              </td>
            </tr>
            </tbody>
          </table>
          <br>
          <table style="width: 97%;">
            <tbody>
            <tr>
              <td><h2 style="float: left;">我的商品：</h2></td>
              <td><el-button @click="isShow.publishCommodityDialog=true" style="float: right;">发布商品</el-button></td>
            </tr>
            </tbody>
          </table>
          <el-table :data="myCommodities" style="width: 97%" border="true">
            <el-table-column prop="id" label="ID" width="90"></el-table-column>
            <el-table-column label="封面" width="150">
              <template #default="scope">
                <img :src="scope.row.coverUrl" style="height: 70px; width: 125px;">
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" width="160"></el-table-column>
            <el-table-column label="销售类型" width="90">
              <template #default="scope">
                <div v-if="scope.row.salesType==='seckill'">秒杀</div>
                <div v-else-if="scope.row.salesType==='acution'">拍卖</div>
                <div v-else-if="scope.row.salesType==='common'">普通</div>
              </template>
            </el-table-column>
            <el-table-column prop="price" label="价格" width="110"></el-table-column>
            <el-table-column label="限量" width="80">
              <template #default="scope">
                <div v-if="scope.row.limited===-1">不限量</div>
                <div v-else>{{scope.row.limited}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="num" label="商品数量" width="100"></el-table-column>
            <el-table-column prop="commentNum" label="评论数量" width="100"></el-table-column>
            <el-table-column prop="mark" label="商品评分" width="60"></el-table-column>
            <el-table-column prop="sales" label="销售额" width="100"></el-table-column>
            <el-table-column prop="sellTime" :formatter="formatter" label="发售时间" width="160"></el-table-column>
            <el-table-column prop="setTime" :formatter="formatter" label="创建时间" width="160"></el-table-column>
            <el-table-column fixed="right" label="操作" min-width="120">
              <template #default>
                <el-button link type="primary" size="small" @click="handleClick">
                  Detail
                </el-button>
                <el-button link type="primary" size="small">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 关注 -->
    <div v-if="menuIndex==='3'" style="margin: 0 auto; width: 1360px; padding: 20px; min-height: 100px;">
      <el-tabs v-model="relationIndex" class="demo-tabs" @tab-click="handleClick" :stretch="true" style="width: 100%;">
        <el-tab-pane label="好友" name="1">
          <ul style="list-style-type: none; width: 100%; padding: 0">
            <li v-for="(value, index) in friends" style="height: 50px; width: 100%">
              <el-avatar :size="40" :src="value.avatarUrl" style="margin-top: 5px; margin-right: 5px; float: left"></el-avatar>
              <div style="float: left; line-height: 50px">{{value.username}}</div>
              <el-button v-if="value.deleted===0" type="info" style="float: right;" @click="notAttention(value.id)?value.deleted=1:value.deleted=0" round>已关注</el-button>
              <el-button v-else-if="value.deleted===1" type="primary" style="float: right;" @click="attention(value.id)?value.deleted=0:value.deleted=1" round>关注</el-button>
              <el-button v-if="value.deleted===0" type="primary" style="float: right; margin-right: 6px;" @click="chatFriend(value)" round>聊天</el-button>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="关注" name="2">
          <ul style="list-style-type: none; width: 100%; padding: 0">
            <li v-for="(value, index) in friends" style="height: 50px; width: 100%">
              <el-avatar :size="40" :src="value.avatarUrl" style="margin-top: 5px; margin-right: 5px; float: left"></el-avatar>
              <div style="float: left; line-height: 50px">{{value.username}}</div>
              <el-tag class="ml-2" type="success" size="default" style="margin: 10px 5px; float: right;">好友</el-tag>
            </li>
            <li v-for="(value, index) in users" style="height: 50px; width: 100%; margin-bottom: 10px">
              <el-avatar :size="40" :src="value.avatarUrl" style="margin-top: 5px; margin-right: 5px; float: left"></el-avatar>
              <div style="float: left; line-height: 50px">{{value.username}}</div>
              <el-button v-if="value.deleted===0" type="info" style="float: right;" @click="notAttention(value.id)?value.deleted=1:value.deleted=0" round>已关注</el-button>
              <el-button v-else-if="value.deleted===1" type="primary" style="float: right;" @click="attention(value.id)?value.deleted=0:value.deleted=1" round>关注</el-button>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="粉丝" name="3">
          <ul style="list-style-type: none; width: 100%; padding: 0">
            <li v-for="(value, index) in friends" style="height: 50px; width: 100%">
              <el-avatar :size="40" :src="value.avatarUrl" style="margin-top: 5px; margin-right: 5px; float: left"></el-avatar>
              <div style="float: left; line-height: 50px">{{value.username}}</div>
              <el-tag class="ml-2" type="success" size="default" style="margin: 10px 5px; float: right;">好友</el-tag>
            </li>
            <li v-for="(value, index) in fanss" style="height: 50px; width: 100%">
              <el-avatar :size="40" :src="value.avatarUrl" style="margin-top: 5px; margin-right: 5px; float: left"></el-avatar>
              <div style="float: left; line-height: 50px">{{value.username}}</div>
              <el-button v-if="value.deleted===0" type="primary" style="float: right;" @click="attention(value.id)?value.deleted=1:value.deleted=0" round>关注</el-button>
              <el-button v-else-if="value.deleted===1" type="info" style="float: right;" @click="notAttention(value.id)?value.deleted=0:value.deleted=1" round>已关注</el-button>
            </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 创作 -->
    <div v-if="menuIndex==='4'" style="margin: 20px auto; width: 1200px; padding: 10px; border-radius: 10px; border: 1px rgba(100,100,100,0.4) solid; overflow-y: hidden">
      <table>
        <tbody>
        <tr>
          <td>
            <el-menu
              default-active="1"
              class="el-menu-vertical-demo"
              style="min-height: 150px; width: 150px;">
              <el-menu-item index="1">
                <el-icon><Position></Position></el-icon>
                <span>我的创作</span>
              </el-menu-item>
              <el-menu-item index="2" disabled>
                <el-icon><document /></el-icon>
                <span>Navigator</span>
              </el-menu-item>
              <el-menu-item index="3">
                <el-icon><setting /></el-icon>
                <span>Navigator</span>
              </el-menu-item>
            </el-menu>
          </td>
          <td>
            <!-- <table>
              <tr class="videoBox" v-for="video in myVideos" @click="href('/video/index.html?id='+video.id)">
                <td>
                  <img class="videoBox_img" :src="video.coverUrl">
                </td>
                <td>
                  <div class="videoBox_title">{{video.title}}</div>
                  <div class="videoBox_bottom">{{video.intro}}</div>
                </td>
                <td style="width: 80px;">
                  <div v-if="video.isDraft===true" style="color: gray;">未审核</div>
                  <div v-if="video.isDraft===false" style="color: green;">审核通过</div>
                </td>
                <td>
                  <div class="videoBox_bottom">{{getTime(video.setTime,1)}}</div>
                </td>
              </tr>
            </table> -->
            <table class="creation-table">
              <tr class="creation-item" v-for="video in myVideos" @click="href('/video/index.html?id='+video.id)">
                <td class="image-cell">
                  <img class="cover-image" :src="video.coverUrl">
                </td>
                <td class="content-cell">
                  <div class="video-title">{{video.title}}</div>
                  <div class="video-intro">{{video.intro}}</div>
                </td>
                <td class="status-cell">
                  <div v-if="video.isDraft" class="status-badge draft">未审核</div>
                  <div v-else class="status-badge approved">审核通过</div>
                </td>
                <td class="time-cell">
                  <div class="time-text">{{getTime(video.setTime,1)}}</div>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <!-- 设置 -->
    <div v-if="menuIndex==='5'" style="margin: 0 auto; width: 1360px; padding: 20px; min-height: 100px;">
      <ul style="list-style-type: none; width: 100%; padding: 0">
        <li>{{DEFAULT_WORD.logout}}<el-button type="warning" style="float: right" @click="logOut" plain>{{DEFAULT_WORD.logout}}</el-button></li>
      </ul>
    </div>
  </div>
  <!-- 发布商品框 -->
  <el-dialog class="registerDialog" title="发布商品" v-model="isShow.publishCommodityDialog"
             :draggable="true" :modal="false" align-center
             style="width: 790px; height: 800px; overflow-y: auto;">
    <table>
      <tbody>
      <tr>
        <td style="width: 100px;">商品封面：</td>
        <td>
          <input type="file" @change="uploadCover($event)" accept="image/*"><br>
          <img alt="封面" :src="publish_commodity.coverUrl" style="width: 400px; height: 220px; border: 1px solid rgba(0,0,0,0.5);">
        </td>
      </tr>
      <tr>
        <td>商品名称：</td>
        <td><el-input v-model="publish_commodity.name" style="width: 240px" placeholder="请输入..."></el-input></td>
      </tr>
      <tr>
        <td>销售类型：</td>
        <td><el-radio-group v-model="publish_commodity.salesType" class="ml-4">
          <el-radio value="common" size="large">普通</el-radio>
          <el-radio value="acution" size="large">拍卖</el-radio>
          <el-radio value="seckill" size="large">秒杀</el-radio>
        </el-radio-group></td>
      </tr>
      <tr>
        <td>价格：</td>
        <td><el-input-number v-model="publish_commodity.price"
                             :min="0" :max="9999999"
                             controls-position="right" size="default">
        </el-input-number></td>
      </tr>
      <tr>
        <td>商品数量：</td>
        <td><el-input-number v-model="publish_commodity.num" :min="1" :max="1000000"></el-input-number></td>
      </tr>
      <tr>
        <td>限量：</td>
        <td><el-input-number v-model="publish_commodity.limited" :min="-1" :max="10"></el-input-number></td>
      </tr>
      <tr>
        <td>发售时间：</td>
        <td><el-date-picker
          v-model="publish_commodity.sellTime"
          type="datetime"
          placeholder="Select date and time"
        ></el-date-picker></td>
      </tr>
      <tr>
        <td>介绍图片：</td>
        <td><el-upload action="#" list-type="picture-card" :auto-upload="false" :on-change="fileChange">
          <el-icon><Plus /></el-icon>
          <template #file="{ file }">
            <div>
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                    <el-icon><zoom-in /></el-icon>
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                    <el-icon><Download /></el-icon>
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                    <el-icon><Delete /></el-icon>
                </span>
              </span>
            </div>
          </template>
        </el-upload></td>
      </tr>
      <tr>
        <td colspan="2"><el-button type="primary" style="float: right;" @click="publishCommodity">发布商品</el-button></td>
      </tr>
      </tbody>
    </table>
  </el-dialog>
  <!-- 发布商品中图片预览框 -->
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 820px;">
  </el-dialog>
  <!-- 功能栏 -->
  <div class="menu">
    <el-menu :default-active="menuIndex"
             :collapse="!isUnfold"
             @open="handleOpen"
             @select="handleSelect"
             @mouseover="isUnfold=true"
             @mouseleave="isUnfold=false"
             style="height: 280px;">
      <el-menu-item index="1">
        <el-icon><House></House></el-icon>
        <span style="user-select: none;">我的</span>
      </el-menu-item>
      <el-menu-item index="2">
        <el-icon><Goods></Goods></el-icon>
        <span style="user-select: none;">购物</span>
      </el-menu-item>
      <el-menu-item index="3">
        <el-icon><User></User></el-icon>
        <span style="user-select: none;">关系</span>
      </el-menu-item>
      <el-menu-item index="4">
        <el-icon><Edit></Edit></el-icon>
        <span style="user-select: none;">创作</span>
      </el-menu-item>
      <el-menu-item index="5">
        <el-icon><Setting></Setting></el-icon>
        <span style="user-select: none;" >设置</span>
      </el-menu-item>
    </el-menu>
  </div>
  <!-- 充值 -->
  <RechargeDialog :isShow="isShow"></RechargeDialog>
</template>
<style scoped>
.menu {
  position: fixed;
  left: 15px;
  height: 280px;
  top: 300px;
  border-radius: 20px;
  overflow-y: hidden;
  box-shadow: 0 0 1px 0 rgba(100, 100, 100, 1);
  transition: 0.2s ease-out;
}
.menu:hover {
  box-shadow: 0 0 8px 1px rgba(100, 100, 100, 0.4);
}

.main {
  width: 1400px;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 1);
  border: 1px rgba(220, 220, 220, 0.8) solid;
}

.my {
  height: 500px;
  width: 1400px;
  /* 加载背景图 */
  background-image: url('/backimg1.png');
  /* 背景图垂直、水平均居中 */
  background-position: center center;
  /* 背景图不平铺 */
  background-repeat: no-repeat;
  /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
  background-attachment: fixed;
  /* 让背景图基于容器大小伸缩 */
  background-size: cover;
  /* 设置背景颜色，背景图加载过程中会显示背景色 */
  background-color: #464646;
}

.videoBox {
  position: relative;
  /*overflow: hidden;*/
  z-index: 0;
  float: left;
  /*background-color: rgba(255, 255, 255, 0.7);*/
  width: 250px;
  height: 200px;
  margin: 15px;
  border-radius: 10px;
  /*backdrop-filter: blur(50px);*/
  /*box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.4);*/
  transition: 0.2s ease-out;
}
.videoBox:hover {
  /*box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.4);*/
}

.videoBox_img {
  position: relative;
  /*min-width: 10px;*/
  /*max-width: 300px;*/
  height: 150px;
  width: 250px;
  margin: 0 auto;
  border-radius: 10px;
  transition: 0.2s ease-out;
  top: 0;
  left: 0;
}
.videoBox_img:hover {
  height: 158px;
  width: 258px;
  top: -4px;
  left: -4px;
}
.videoBox_img:hover+.videoBox_totalTime {
  width: 254px;
  left: -4px;
  top: 124px;
  opacity: 0;
  background-color: rgba(0,0,0,0);
  backdrop-filter: blur(0);
}

.videoBox_totalTime {
  position: absolute;
  top: 120px;
  left: 0;
  text-align: right;
  padding-right: 4px;
  width: 246px;
  line-height: 30px;
  font-size: 13px;
  font-weight: 500;
  color: white;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  transition: 0.2s ease-out;
  opacity: 1;
  background-color: rgba(0,0,0,0.2);
  backdrop-filter: blur(10px);
}

.videoBox_title {
  width: 100%;
  height: 25px;
  line-height: 25px;
  transition: 0.2s ease-out;
  margin: 0 1px;
}
.videoBox_title:hover {
  color: #00AEEC;
}

.videoBox_bottom {
  margin: 0 1px;
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  color: #8c939d;
}
.videoBox_bottom:hover {
  color: var(--subject-color);
}

.bili-video-card__stats--icon {
  text-align: left;
  font-family: inherit;
  font-weight: 400;
  font-style: normal;
  cursor: pointer;
  pointer-events: none;
  font-size: 13px;
  line-height: 18px;
  fill: rgb(255, 255, 255);
  overflow: hidden;
  vertical-align: middle;
  box-sizing: border-box;
  padding: 0;
  margin: 0 2px 0 0;
  width: 18px;
  height: 18px;
  color: #fff;
}

.bili-video-card__info--owner__up {
  text-align: left;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  font-size: 100%;
  font-weight: 400;
  font-style: normal;
  line-height: 1.25;
  cursor: pointer;
  fill: currentcolor;
  overflow: hidden;
  vertical-align: middle;
  box-sizing: border-box;
  padding: 0;
  color: inherit;
  margin: 0 2px 0 0;
  width: 17px;
  height: 17px;
}

.carousel_img {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  border-radius: 10px;
}

.carousel_title {
  background-color: rgba(255, 255, 255, 0.2);
  font-size: 20px;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 5px 5px 15px 15px;
  min-height: 50px;
  width: 800px;
  transition: 0.2s ease-out;
}
.carousel_img:hover+.carousel_title, .carousel_title:hover {
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
}

.demo-tabs {
  min-height: 862px !important;
}

.zy_module {
  width: 1600px;
  height: 200px;
  margin: 20px 10px 30px 10px;
}

.creation button {
  background-color: white;
  color: rgba(100, 100, 100, 1);
  width: 100px;
  height: 40px;
  border: 1px rgba(200, 200, 200, 1) solid;
  border-radius: 3px;
  margin: 1px 4px;
}
.creation button:hover {
  background-color: white;
  color: var(--subject-color);
  border: 1px rgb(90, 160, 215) solid;
}

.min_videoBox {
  z-index: 0;
  float: left;
  background-color: rgba(255, 255, 255, 1);
  width: 200px;
  height: 150px;
  margin: 15px;
  border-radius: 10px;
  transition: 0.2s ease-out;
}
.min_videoBox:hover {
  background-color: rgba(220, 220, 220, 1);
}

.min_videoBox_img {
  width: 200px;
  height: 128px;
  margin: 0;
  border-radius: 10px;
}

.min_videoBox_title {
  width: 192px;
  height: 10px;
  font-size: 14px;
  transition: 0.2s ease-out;
  margin: 0 4px;
}

/*签到按钮*/
.signin_btn {
  width: 70px;
  height: 30px;
  float: right;
  border: 0;
  border-radius: 5px;
  background-color: var(--subject-color);
}
.signin_btn:active {
  background-color: var(--subject-shallow-color);
}


/*购物车*/
.shoppingCart {
  overflow: hidden;
  width: 800px;
  height: 120px;
  text-align: center;
  margin: 20px 200px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  transition: 0.2s ease-out;
}
.shoppingCart:hover {
  background-color: #F5F7FA;
}



.creation-table {
  width: 100%;
  border-spacing: 0 16px;
}

.creation-item {
  background: #fff;
  border-radius: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.creation-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.image-cell {
  padding: 12px;
  width: 200px;
}

.cover-image {
  width: 180px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.content-cell {
  padding: 12px;
  width: 40%;
}

.video-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.4;
}

.video-intro {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.status-cell {
  padding: 12px;
  width: 100px;
  text-align: center;
}

.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
}

.status-badge.draft {
  background: #f5f7fa;
  color: #909399;
}

.status-badge.approved {
  background: #f0f9eb;
  color: #67c23a;
}

.time-cell {
  padding: 12px 24px;
  text-align: right;
}

.time-text {
  color: #909399;
  font-size: 13px;
}
</style>
